<template>
	<view class="wrap">
		<view class="head u-p-30" >
			<u-image class="img" v-if="result.url" :src="$u.http.config.baseUrl + (JSON.parse(result.url)[0].url)" width="100%" height="100%" mode=""></u-image>
			
			<u-navbar :border-bottom="false" :background="{backgroundColor: 'transparent'}" back-icon-color="#FFFFFF">
			</u-navbar>
			<view class="text">
				<view class="left">{{result.name}}</view>
				<view class="right">
					<u-icon name="map"></u-icon>
					<span>{{result.city === result.province ? result.province : result.province + "" + result.city}}</span>
				</view>
			</view>
		</view>
		<view class="center u-p-30">
			<u-row>
				<u-col span="3">
					<view class="title">面积（亩）</view>
					<view class="bold">{{result.area}}</view>
				</u-col>
				<u-col span="3">
					<view class="title">种植(棵)</view>
					<view class="bold">{{result.treeNum}}</view>
				</u-col>
				<u-col span="3">
					<view class="title">种植时间</view>
					<view class="bold">{{result.year}}</view>
				</u-col>
				<u-col span="3">
					<view class="title">公益机构</view>
					<view class="bold">{{result.foundation}}</view>
				</u-col>
			</u-row>
		</view>
		<view class="content u-flex" v-if="result.city">
			<view class="box u-m-b-50" v-for="item in result.gardenTrends" :key="item.pkid" @click="toDetail(item.pkid)">
				<view class="content_img">
					<u-image class="img" :src="$u.http.config.baseUrl + (JSON.parse(item.url)[0].url)" width="100%" height="100%" mode=""></u-image>
				</view>
				<view class="u-text-center text u-line-1 u-p-l-30 u-p-r-30">
					{{item.title}}
				</view>
				<view class="u-flex u-p-l-30 u-p-r-30 bottom u-p-t-20" style="justify-content: space-between;">
					<view>
						<span><u-icon name="map"></u-icon></span>
						<span>摄像头</span>
					</view>
					<!-- <view>
						<span><u-icon name="map"></u-icon></span>
						<span>{{item.city}}</span>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: {}
			}
		},
		onLoad (option) {
			console.log(option)
			this.$u.api.gardenInfo({id:option.id}).then(res => {
				console.log(res)
				this.result = res
			}).catch(res => {
				this.$u.toast(res.msg)
			})
		},
		methods: {
			toDetail (id){
				this.$u.route('pages/work/apply/loveforest/personal_garden/achievement/gardens_detail',{id: id,name:this.result.name})
			}
		}
	}
</script>

<style scoped lang="scss">
page {
background: #F7F7F7;
}
 .head {
	 height: 260px;
	 width:100%;
	 position: relative;
	 .img{
		 position:absolute;
		 top:0;
		 left:0;
	 }
	 .text {
		 color: #fff;
		 position:absolute;
		 z-index:100;
		 width:100%;
		 bottom: 20px;
		 right:0;
		 padding: 0 30px;
		 .left{
			 float:left;
			 font-size: 32rpx;
		 }
		 .right{
			 float:right;
		 }
	 }
 }
 .content {
	 padding: 30rpx;
	 justify-content: space-between;
	 flex-wrap:wrap;
	 .box{
		 width: 320rpx;
		 min-width:320rpx;
		 max-width: 320rpx;
		 height: 384rpx;
		 border-radius: 10px;
		 overflow:hidden;
		 background:#fff;
		 .content_img {
			 height: 237rpx;
			 width:100%;
		 }
		 .text {
		 	font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			padding: 14px 0 3px 0;
		 }
		 .bottom {
			 font-size: 22rpx;
			 color: #999999;
		 }
	 }
	 
 }
 .center {
	 background:#fff;
	 .title {
		 color: #999999;
		 font-size: 22rpx;
		 margin-bottom: 8px;
	 }
	 .bold {
		 font-size: 26rpx;
		 color: #000000;
		 font-weight: bold;
	 }
 }
</style>
